<!-- 解决方案页面 -->
<template>
  <div class="SolveScheme">
    <div class="main">
      <div class="main_top">
        <h3>Solution</h3>
        <p>解决方案</p>
      </div>
      <div class="main_middle">
        <div class="m_m_left">
          <div class="m_m_left_con">
            <div class="m_m_left_name">使用场景</div>
            <div class="m_m_left_nameE">Usage scenarios</div>
            <div class="m_m_left_nameI">
              <img @click="cjAllBtn" src="./img/lineOne.png" />
            </div>
          </div>
        </div>
        <div class="m_m_right">
          <ul class="center_nav">
            <li
              v-for="(item, index) in soluList"
              :key="index"
              :class="{ isActive: current === index }"
              :data-menuanchor="item.path"
              @mouseover="yiru(index)"
              @mouseleave="yichu"
            >
              <p class="title">{{ item.title }}</p>
              <img :src="item.img" />
              <div class="zhezhao">
                <p class="neirong">
                  {{ item.text }}
                </p>
                <img
                  @click="allBtnClick"
                  class="allBtn"
                  src="./img/lineOne.png"
                  alt=""
                />
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="main_bottom">
        <ul class="m_b_ul">
          <li class="m_b_li" v-for="(item, index) in solveIcon" :key="index">
            <img :src="item.img" alt="" />
            <p>{{ item.name }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      current: '',
      soluList: [
        {
          img: require('./img/m_one.jpg'),
          title: '智慧城市',
          text: '城市数字孪生是对城市产业经济、资产环境、交通运输、社会治理、公共安全等领域的核心指标进行态势监测与可视分析，有效提升管理者对城市业务监管，辅助管理者全面掌控城市运行态势，构建万物互联的智慧城市。'
        },
        {
          img: require('./img/m_two.jpg'),
          title: '智慧园区',
          text: '基于数字孪生的三维虚拟化技术，以数字化，可视化，智能化，平台化为目标，运用直观、动态的形式展示园区各类建筑及设备的空间分布，集安防管理、消防管理、通行管理、能效管理等模块为一体的智慧管理平台，实现对园区从宏观到微观的全方位展示和管理。'
        },
        {
          img: require('./img/m_three.jpg'),
          title: '智慧制造',
          text: '工业制造可视化平台是一个灵活柔性的系统，从生产排产指令的下达到完工信息的反馈，实现闭环。通过建立工厂的Digital Twin（数字映射），更加方便地洞察生产现场的状态，实时洞察工厂的生产、质量、能耗和设备状态信息，避免非计划性停机。'
        }
      ],
      solveIcon: [
        {
          name: '智慧城市',
          img: require('./img/one.png')
        },
        {
          name: '智慧园区',
          img: require('./img/two.png')
        },
        {
          name: '智慧文旅',
          img: require('./img/three.png')
        },
        {
          name: '智慧制造',
          img: require('./img/four.png')
        },
        {
          name: '智慧能源',
          img: require('./img/five.png')
        },
        {
          name: '智慧机房',
          img: require('./img/six.png')
        }
      ]
    };
  },
  computed: {},
  watch: {},
  methods: {
    yiru(index) {
      this.current = index;
      // console.log(index);
    },
    yichu() {
      this.current = '';
      // console.log(index);
    },
    allBtnClick() {
      console.log('all被点击了');
    },
    cjAllBtn() {
      console.log('使用场景all被点击了');
    }
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {}
};
</script>
<style lang="less" scoped>
.SolveScheme {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  .main {
    width: 100%;
    height: 100vh;
    padding-top: 1.29rem;
    background: url('../ProductAndService/img/1tuceng.jpg') no-repeat center;
    background-size: cover;
    .main_top {
      padding-left: 10%;
      padding-top: 2%;
      h3 {
        font-size: 0.58rem;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
      }
      p {
        font-size: 0.28rem;
        font-family: PingFang SC;
        color: #ffffff;
      }
    }
    .main_middle {
      padding-left: 10%;
      padding-top: 2%;
      position: relative;
      .m_m_left {
        width: 1.96rem;
        float: left;
        .m_m_left_con {
          padding-top: 34%;
          .m_m_left_name {
            font-size: 0.48rem;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ffffff;
          }
          .m_m_left_nameE {
            font-size: 0.24rem;
            font-family: PingFang SC;
            color: #fefefe;
            line-height: 0.45rem;
          }
          .m_m_left_nameI {
            margin-top: 0.3rem;
            img {
              width: 0.35rem;
              cursor: pointer;
            }
          }
        }
      }
      .m_m_right {
        float: left;
        width: 75%;
        padding-left: 4%;
        .center_nav {
          height: auto;
          display: flex;
          li {
            list-style: none;
            text-align: center;
            width: auto !important;
            height: auto;
            margin: 0px 0.26rem;
            position: relative;
            flex: 1;
            img {
              width: 100%;
              height: 100%;
            }
            .title {
              font-family: PingFang SC;
              color: #fff;
              font-size: 0.36rem;
              font-weight: bold;
              text-align: left;
              padding: 20% 0 0.2rem 0.5rem;
              position: absolute;
            }
            .zhezhao {
              width: 100%;
              height: 100%;
              background: linear-gradient(92deg, #33f8ff8a 0%, #2fffb680 100%);
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              // display: none;
              opacity: 0;
              transition: 0.5s;
              .neirong {
                font-size: 0.16rem;
                font-family: PingFang SC;
                color: #fefefe;
                line-height: 0.3rem;
                text-align: left;
               margin: 20% 0.5rem 0.2rem 0.5rem;
              }
              .allBtn {
                position: absolute;
                width: 0.37rem !important;
                height: 0.2rem !important;
                left: 0.5rem;
                margin-top: 0.2rem;
                cursor: pointer;
              }
            }
            a {
              text-decoration: none;
              color: #ffffff;
            }
          }
          // li:hover {
          //   background: url('./img/mark.png') no-repeat;
          //   background-size: 376px 376px;
          //   margin: 0px 26px;
          // }
          .active {
            font-size: 0.22rem;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ffffff;
          }
        }
      }
    }
  }
}
.m_b_ul {
  display: flex;
  margin: 0 auto;
  width: 83%;
  padding-top: 3%;
  justify-content: space-around;
  .m_b_li {
    transition: 1s;
    width: 100%;
    height: 100%;
    img {
      margin: 0 auto;
      width: 25%;
      display: block;
    }
    p {
      color: #fff;
      text-align: center;
      margin-top: 0.1rem;
      font-size: 0.21rem;
      font-family: PingFang SC;
      font-weight: 400;
    }
  }
}
.m_b_li:hover {
  // transform: rotateY(180deg);
  transform: translateY(-0.2rem);
}
.isActive .zhezhao {
  opacity: 1 !important;
  // display: block !important;
}
.isActive .title {
  opacity: 0 !important;
  // display: block !important;
}
@media screen and (max-width: 1400px) {
  .SolveScheme .main .main_middle .m_m_right .center_nav li .zhezhao .neirong {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
  }
}

// @media screen and (max-width: 1780px) {
//   .SolveScheme .main .main_top {
//     padding-left: 7%;
//     padding-top: 0%;
//   }
//   .SolveScheme .main .main_middle {
//     padding-left: 7%;
//   }
//   .SolveScheme .main .main_middle .m_m_left .m_m_left_con {
//     padding-top: 10%;
//   }
//   .SolveScheme .main .main_middle .m_m_left .m_m_left_con .m_m_left_name {
//     font-size: 0.40rem;
//   }
//   .SolveScheme .main .main_middle .m_m_right {
//     float: none;
//     width: auto;
//     padding-left: 17%;
//   }
//   .SolveScheme .main .main_middle .m_m_right .center_nav li img {
//     width: 100%;
//   }
//   .SolveScheme .main .main_middle .m_m_right .center_nav li .zhezhao {
//     width: 100%;
//   }
//   .SolveScheme .main .main_middle .m_m_right .center_nav li .zhezhao .neirong {
//     -webkit-box-orient: vertical;
//     text-overflow: ellipsis;
//     overflow: hidden;
//     word-break: break-all;
//     display: -webkit-box;
//     -webkit-line-clamp: 2;
//   }
//   .m_b_ul {
//     padding-top: 2%;
//   }
//   .m_b_ul .m_b_li img {
//     width: 0.60rem;
//   }
// }
</style>
